<template>
    <div
        class="notice"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <!-- 公告信息 -->
        <box-group-wrap pageTitle="公告信息" :isShowData="noticeData.length>0">
            <template slot="wrapBody">
                <div class="notice_wrap">
                    <div class="listBox">
                        <ul>
                            <div class="listLine"></div>
                            <li
                                v-for="(item, index) in noticeDataShow"
                                :key="index"
                                style="cursor: pointer"
                                @click="viewNoticeContent(item, index)"
                            >
                                <span
                                    :class="item.isRead === '0' ? 'circleBox redCirle': 'circleBox blueCirle'"
                                ></span>
                                <i
                                    :class="item.isRead === '0' ? 'noticeServe redColor' : 'noticeServe'"
                                    :title="item.noticeTitle"
                                >{{ item.noticeTitle }}</i>
                                <i
                                    :class=" item.isRead === '0' ? 'trainingServeRight noticeServe redColor' : 'trainingServeRight noticeServe'"
                                    :title="item.publishTime"
                                >{{ item.publishTime }}</i>
                            </li>
                        </ul>
                        <div class="more"></div>
                    </div>
                </div>
            </template>
            <template slot="wrapRight">
                <i class="el-icon-refresh" @click="refreshTime($event)"></i>
                <span @click="noticeContentMore">更多>></span>
            </template>
        </box-group-wrap>
        <!-- 查看公告详情 -->
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            class="noticeBody"
            :visible.sync="noticeDialog"
            append-to-body
            center
            width="700px"
        >
            <div slot="title" class="noticeTitle">{{ noticeContent.noticeTitle }}</div>
            <div class="noticeUser">
                <span style="margin-right: 12px">创建人 : {{ noticeContent.createUser }}</span>
                <span>发布时间 : {{ noticeContent.publishTime }}</span>
            </div>
            <div class="ql-editor" style="margin-top: 12px; text-align: justify">
                <span v-html="noticeContent.noticeContent"></span>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button
                    @click="dialogClose(noticeContent)"
                    type="primary"
                    v-if="noticeContent.isRead === '0'"
                >知道了</el-button>
            </div>
        </el-dialog>
        <!-- 查看更多公告 -->
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="dialogNoticeFlag"
            append-to-body
            center
            width="900px"
            class="dialog_wrap"
        >
            <div slot="title">公告列表</div>
            <el-table
                :data="noticeDataList"
                width="100%"
                border
                highlight-current-row
                stripe
                class="heard-bg"
            >
                <el-table-column label="公告标题" prop="noticeTitle" width="350"></el-table-column>
                <el-table-column label="公告内容" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{ scope.row.noticeContent.replace(/<[^>]+>/g, "") }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="发布时间" prop="publishTime" width=""></el-table-column>
                <el-table-column label="失效时间" prop="inEffectTime" width=""></el-table-column>
                <el-table-column label="状态" width="180">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isRead === '0'" class="redColor">未读</span>
                        <span v-else-if="scope.row.isRead === '1'" class="buleColor">已读</span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <Pagination
                    :hanleChangeCurrentPage="hanleChangeCurrentPageNotice"
                    :handleChangeSize="handleChangeSizeNotice"
                    :currentPage="currentPageNotice"
                    :pageSize="pageSizeNotice"
                    :total="totalNotice"
                />
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { isEmptyObject } from '@/utils/Object';
import Pagination from '@/components/Pagination/Pagination.vue';
import BoxGroupWrap from '@/components/boxgroupwrap/BoxGroupWrap.vue';
export default {
    name: 'Notice',
    data() {
        return {
            // isShowData: false
            noticeDataShow: [],
            noticeDataList: [],
            noticeContent: {},
            noticeDialog: false,
            dialogNoticeFlag: false,
            // 当前页码
            currentPageNotice: 0,
            // 页码大小
            pageSizeNotice: 5,
            // 总数
            totalNotice: 0,
            pageLoading: true,
        }
    },
    computed: {
        ...mapGetters([
            'noticeData', // 最新公告
        ]),
    },
    components: { 'box-group-wrap': BoxGroupWrap, Pagination },
    mounted() {
        this.getNewNotice();
    },
    methods: {
        // 最新公告
        getNewNotice() {
            const params = {
                pageNum: 1,
                pageSize: 5,
            };
            this.$post.noticeMangage.searchByUserId(params).then((res) => {
                if (res.data.success) {
                    this.noticeDataShow = res.data.content.recordList || [];
                }
                this.pageLoading = false;
            });
        },
        // 点击公告更多
        getInitNoticeData() {
            const params = {
                pageNum: this.currentPageNotice,
                pageSize: this.pageSizeNotice,
            };
            this.$post.noticeMangage.searchByUserId(params).then((res) => {
                if (res.data.success) {
                    this.noticeDataList = res.data.content.recordList || [];
                    this.totalNotice = res.data.content.recordCount;
                }
            });
        },
        // 
        // 公告信息刷新
        refreshTime(e) {
            const dom = e.target;
            dom.style.animationPlayState = 'running'
            this.pageLoading = true;
            this.getNewNotice();
            let clearOut = setTimeout(function () {
                dom.style.animationPlayState = 'paused'
                clearTimeout(clearOut)
            }, 3000)
        },

        // 点击公告查看公告内容
        viewNoticeContent(data, index) {
            this.noticeDialog = true;
            this.index = index;
            this.noticeContent = JSON.parse(JSON.stringify(data));
        },
        // 公告已读
        dialogClose(data) {
            const params = {
                id: data.id,
                isRead: '1',
            };
            this.$post.noticeMangage.updateDeptUserNotice(params).then((res) => {
                if (res.data.success) {
                    this.noticeDialog = false;
                    this.noticeDataShow[this.index].isRead = '1';
                    this.$store.commit('common/UPDATE_NOTICEDATA', this.noticeDataShow);
                }
            });
        },
        // 查看更多公告
        noticeContentMore() {
            this.dialogNoticeFlag = true;
            this.getInitNoticeData();
        },
        // 页码切换方法
        hanleChangeCurrentPageNotice(val) {
            this.currentPageNotice = val;
            this.getInitNoticeData();
        },
        // 切换分页大小方法
        handleChangeSizeNotice(val) {
            this.pageSizeNotice = val;
            this.getInitNoticeData();
        },
    },

}
</script>
<style lang="scss">
.notice {
    .noticeBody {
        .noticeUser {
            margin-top: 5px;
            color: #555;
        }
        .ql-editor {
            color: #220;
        }
    }
    .dialog_wrap {
        .el-table {
            .redColor {
                color: #ec4545;
            }
            .buleColor {
                color: #409eff;
            }
        }
    }
    .box-group-wrap {
        .el-icon-refresh {
            animation-play-state: paused;
            -webkit-animation-play-state: paused;
        }
    }
}
</style>
<style scoped lang="scss">
.notice {
    .notice_wrap {
        padding: 5px 5px 0 5px;
    }
    .listBox {
        width: 100%;
        height: 100%;
        position: relative;
        ul {
            position: relative;
            left: 0;
            z-index: 1;
            overflow: hidden;
            max-height: 240px;
            li {
                .redCirle {
                    border: 1px solid red;
                }
                .redColor {
                    color: red;
                }
                .buleColor {
                    color: #409eff;
                }
                i {
                    font-style: normal;
                    display: inline-block;
                    font-size: 14px;
                }
                .circleBox {
                    position: relative;
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background: #fff;
                    margin-right: 8px;
                }
                .noticeServe {
                    width: 64%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    vertical-align: middle;
                    margin: 0 5px;
                }
                .trainingServeRight {
                    float: right;
                    width: calc(32% - 16px);
                    margin: 0;
                    text-align: right;
                    padding-right: 10px;
                }
            }
        }

        .more {
            margin: 10px 0;
            color: #409eff;
            cursor: pointer;
            text-align: right;
            font-size: 12px;
            position: absolute;
            right: 0;
            bottom: 20px;
        }
    }
}
</style>